<template>
	<view class="cus-page">
		<!-- top -->
		<view class="top type-area com-flex com-row-between">
			<view class="com-flex com-price-color">
				<u-icon name="heart" color="#FF558F" size="36rpx"></u-icon>
				<text class="com-m-l-12" @tap="skip('/pages/shopping-cart/collect')">我的收藏</text>
			</view>
			<text @tap="editFn">{{edit ? "完成" : "编辑"}}</text>
		</view>

		<!-- list -->
		<view class="type-area">
			<u-checkbox-group v-model="checked" @change="checkboxChange(null,$event)">
				<view style="width:100%">
					<view v-for="(tem,ind) in list" :key="ind" class="tem">
						<view class="com-flex">
							<u-checkbox :name="tem.id" size="40rpx" shape="circle" iconSize="30rpx" />
							<image :src="tem.logo" alt=""></image>
							<text>{{tem.name}}</text>
						</view>
						<u-checkbox-group v-model="tem.checked" @change="checkboxChange(ind,$event)">
							<view style="width:100%">
								<view v-for="(item,index) in tem.childen" :key="index" 
									class="com-m-t-40 com-flex item">
									<u-checkbox :name="item.id" size="40rpx" shape="circle" iconSize="30rpx" />
									<image :src="item.imgUrl" alt=""></image>
									<view class="right">
										<text class="u-line-2 com-font-bold title">{{item.title}}</text>
										<u-tag bgColor="#EAFAFF" borderColor="#EAFAFF" color="#02BDF3" size="mini" :text="item.tag" />
										<view class="com-flex com-row-between price-num">
											<view class="price">
												<view class="com-price-color">
													<text class="com-font-32 com-font-bold">{{item.price}}</text>
													<text class="com-font-26">日元</text>
												</view>
												<text class="com-font-20 com-minor-color">(约{{item.rmb}}人民币)</text>
											</view>
											<u-number-box :value="item.num" :min="item.minNum" :max="item.maxNum" bgColor="#fff"></u-number-box>
										</view>
									</view>
								</view>
							</view>
						</u-checkbox-group>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		
		<!-- 全选 -->
		<view class="all" :style="{height:detailShow ? '100%' : 'auto'}">
			<view v-if="detailShow" class="detail-box com-flex com-col-bottom">
				<view class="detail" :style="{height:detailShow ? 'auto' : 0 }">
					<view class="com-flex com-row-between">
						<view class="com-m-r-36"></view>
						<text class="com-font-32 com-font-bold">费用明细</text>
						<u-icon name="close" size="36rpx" @tap="detailShow=false"></u-icon>
					</view>
					<view class="com-m-t-60 com-flex com-row-between com-font-16">
						<text>商品总价</text>
						<text class="com-price-color">13280日元</text>
					</view>
					<view class="com-m-t-40 com-flex com-row-between com-font-16">
						<text>日本国内运费</text>
						<text class="com-price-color">13280日元</text>
					</view>
					<view class="com-m-t-35 com-font-24 com-price-color">*国际运费在订单到达日本仓库称重后收取</view>
				</view>
			</view>
			<view class="com-flex com-row-center exchange-rate">
				当前汇率：1日元 = 0.0532人民币
			</view>
			<view class="type-area com-flex com-row-between content">
				<view class="com-flex">
					<u-checkbox-group v-model="selectAll" @change="all">
						<u-checkbox name="all" size="40rpx" shape="circle" iconSize="30rpx" />
					</u-checkbox-group>
					<text class="com-m-l-16">全选</text>
					<view v-if="!edit" class="com-m-l-32">
						<view class="com-price-color">
							<text class="com-font-36 com-font-bold">1660</text>
							<text class="com-font-30">日元</text>
						</view>
						<text class="com-font-24 com-minor-color">约83人民币</text>
					</view>
				</view>
				<view class="com-flex">
					<view v-if="!edit" class="com-m-r-20 com-flex com-active-color" @tap="detailShow=!detailShow">
						<text class="com-m-r-8">明细</text>
						<u-icon :name="detailShow ? 'arrow-down' :'arrow-up'" color="#02BDF3"></u-icon>
					</view>
					<view v-if="!edit" class="com-flex com-row-center com-font-bold settlement" @tap="submit">结算</view>
					<view v-else class="com-flex com-row-center com-font-bold settlement" >删除</view>
				</view>
			</view>
		</view>

		<!-- 底部安全距离 -->
		<u-gap height="164rpx" bgColor="transparent"></u-gap>
	</view>
</template>

<script>
import coalStoveVue from './coal-stove.vue';
export default {
	name: "",
	props: {},
	components: {},
	data() {
		return {
			edit: false, // 默认为非编辑状态
			list: [
				{
					id: 1,
					checked: [],
					logo: '/static/logo.ico',
					name: 'rakuma卖家：泡泡玛特',
					childen: [
						{ 
							id: 11,
							imgUrl: '/static/temporary/img2.jpg',
							title: '宝可梦集换式卡牌游戏PTCGA 简中日月第一弹',
							tag: '新品',
							price: 1660,
							rmb: 83,
							num: 1,
							minNum: 1,
							maxNum: 10,
						},
						{ 
							id: 12,
							imgUrl: '/static/temporary/img2.jpg',
							title: '宝可梦集换式卡牌游戏PTCGA 简中日月第一弹',
							tag: '二手',
							price: 1660,
							rmb: 83,
							num: 1,
							minNum: 1,
							maxNum: 10,
						}
					]
				},
				{
					id: 2,
					checked: [],
					logo: '/static/logo.ico',
					name: 'rakuma卖家：泡泡玛特',
					childen: [
						{ 
							id:21,
							imgUrl: '/static/temporary/img2.jpg',
							title: '宝可梦集换式卡牌游戏PTCGA 简中日月第一弹',
							tag: '新品',
							price: 1660,
							rmb: 83,
							num: 1,
							minNum: 1,
							maxNum: 10,
						}
					]
				},
				{
					id: 3,
					checked: [],
					logo: '/static/logo.ico',
					name: 'rakuma卖家：泡泡玛特',
					childen: [
						{ 
							id: 31,
							imgUrl: '/static/temporary/img2.jpg',
							title: '宝可梦集换式卡牌游戏PTCGA 简中日月第一弹',
							tag: '新品',
							price: 1660,
							rmb: 83,
							num: 1,
							minNum: 1,
							maxNum: 10,
						},
						{ 
							id: 32,
							imgUrl: '/static/temporary/img2.jpg',
							title: '宝可梦集换式卡牌游戏PTCGA 简中日月第一弹',
							tag: '二手',
							price: 1660,
							rmb: 83,
							num: 1,
							minNum: 1,
							maxNum: 10,
						}
					]
				},
			],
			// 全选
			selectAll: [], // 默认不全选
            checked: [], // 选中的
			detailShow: false,
		};
	},

	computed: {},
	watch: {},

	onLoad(){
		// 添加店铺和商品的选中状态(数据请求完成调用)
		// this.addCheckedStatus(false);
	},
	mounted() {},

	methods: {
		// 编辑
		editFn(){
			this.edit = !this.edit;
			this.allChecked = false;
			// this.addCheckedStatus(false);
		},

		// 跳转
		skip(url){
			uni.navigateTo({ url:url })
		},

		// 结算
		submit(){
			uni.navigateTo({ url: "/pages/shopping-cart/place-order" })
		},


		// 添加店铺和商品的选中状态
		addCheckedStatus(status){
			this.list.map(v=>{
				v['checked'] = status;
				v.childen.map(a=>{
					a['checked'] = status;
				})
			})
		},


	


		// 复选框选择事件
		checkboxChange(ind,e){
			if(ind==null){ // 店铺
				console.log("店铺",e)
				if(e.length == this.list.length){
					this.selectAll = ["all"];
				}else{
					this.selectAll = [];
				}
			}else{ // 商品
				console.log("商品",e)
				this.list[ind].checked = e;
				if(e.length==this.list[ind].childen.length){
					this.list[ind].checked = []
					console.log(1)
					this.list[ind].childen.map((v,i)=>{
						this.list[ind].checked.push(v.id)
					})
				}
			}
			// // 选中的商品
			// const checkedGoods = []
			// this.list.map(v=>{
			// 	v.childen.map(a=>{
			// 		if(a.checked){
			// 			checkedGoods.push(a)
			// 		}
			// 	})
			// })
			// console.log("选中的店铺和商品",checkedGoods)
		},
		// 全选
		all(e){
			this.selectAll = e;
			this.checked = [];
            if(e.length){
                this.list.map(v=>{
                    this.checked.push(v.id);
                })
            }
		}
	},
};
</script>

<style scoped lang='scss'>
.cus-page{
	padding-top: 80rpx;
	.top {
		width: 100%;
		height: 80rpx;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.tem{
		margin-top: 20rpx;
		padding: 40rpx 32rpx;
		background: #fff;
		border-radius: 24rpx;
		image{
			width: 48rpx;
			height: 48rpx;
			margin: 0 20rpx;
			border-radius: 8px;
		}
		.item{
			image{
				width: 200rpx;
				height: 200rpx;
				margin: 0 26rpx 0 20rpx;
				border-radius: 24rpx;
			}
			.right{
				height: 200rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				.title{
					line-height: 40rpx;
				}
				.price-num{
					width: 100%;
					/deep/.u-number-box__input{
						margin: 0 !important;
						width: 52rpx !important;
						height: 48rpx !important;
						border: 1px solid #E2E2E2 !important;
						border-left: none;
						border-right: none;
					}
					/deep/.u-number-box__minus{
						width: 52rpx;
						height: 52rpx !important;
						border: 1px solid #E2E2E2;
						border-radius: 52rpx 0 0 52rpx;
					}
					/deep/.u-number-box__plus{
						width: 52rpx;
						height: 52rpx !important;
						border: 1px solid #E2E2E2;
						border-radius: 0 52rpx 52rpx 0;
					}
				}
			}
		}
	}

	.all{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		/* #ifdef H5 */
		bottom: 60px;
		/* #endif */
		z-index: 110;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		.detail-box{
			flex: 1;
			background: rgba(0,0,0,.5);
			.detail{
				width: 100%;
				padding: 40rpx 32rpx 30rpx;
				border-radius: 24rpx 24rpx 0 0;
				background: #fff;
				transition: all .5s;
			}
		}
		.exchange-rate{
			width: 100%;
			height: 64rpx;
			background: #EAFAFF;
			font-size: 24rpx;
			color: #02BDF3;
		}
		.content{
			height: 120rpx;
			background: #fff;
			border-bottom: 1px solid #eee;
			.settlement{
				width: 190rpx;
				height: 80rpx;
				background: linear-gradient(-90deg, #C3B0FF 0%, #39E3FD 100%);
				border-radius: 40rpx;
				font-size: 32rpx;
				color: #fff;
			}
		}
	}
}
</style>